<template>

  <el-dialog title="登录"
             :visible.sync="box"
             modal-append-to-body
             append-to-body
             width="40%">
    <el-tag type="danger">私服用户名不是邮箱,密码错误,请去私服登录确认</el-tag>
    <br /> <br />
    <el-tag type="danger">购买企业服务即可获取私服账号<a href="https://avuejs.com/vip">点击了解</a></el-tag>
    <br /> <br />
    <el-form ref="form"
             :rules="rules"
             :model="form"
             @submit.native.prevent
             label-width="80px">
      <el-row :span="24">
        <el-form-item label="用户名"
                      prop="username">
          <el-col :span="24">
            <el-input :disabled="disabled"
                      v-model="form.username"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="密码"
                      prop="password">
          <el-col :span="24">
            <el-input :disabled="disabled"
                      v-model="form.password"
                      type="password"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button :disabled="disabled"
                     type="primary"
                     @click="handleLogin">{{submitText}}</el-button>
          <el-button :disabled="disabled"
                     type="success"
                     v-if="wechat"
                     @click="handleWechat">微信登录</el-button>
        </el-form-item>
      </el-row>

    </el-form>
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
import { openWindow } from '@/util/utils';
export default {
  props: {
    submitText: {
      type: String,
      default: '企业登录'
    },
    wechat: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      form: {},
      disabled: false,
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入用密码', trigger: 'change' }
        ]
      },
      box: false
    }
  },
  computed: {
    ...mapState(['user']),
  },
  created () {
    if (!this.validatenull(this.user)) {
      this.handleSuccess();
    }
  },
  methods: {
    handleOpen () {
      this.box = true;
    },
    handleSuccess () {
      this.box = false;
      this.$emit('submit', this.form);
    },
    handleWechat () {
      openWindow('http://open.weixin.qq.com/connect/qrconnect?appid=wxea6b787f3dcf3850&redirect_uri=https%3A%2F%2Favuejs.com%2Fwechat&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect', '微信扫码登录', 800, 600);
      this.box = false;
    },
    handleLogin () {
      this.disabled = true;
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$httpajax.post(this.website.GIT.loginurl, {
            username: this.form.username,
            password: this.form.password
          }).then(res => {
            const flag = res.data.flag;
            const msg = res.data.msg
            if (flag) {
              this.disabled = false;
              this.$store.commit('setUser', this.form.username)
              this.$message.success('login success!')
              this.handleSuccess();
            } else {
              this.disabled = false;
              this.$message.error(msg)
            }

          }).catch(err => {
            this.disabled = false;
            this.$message.error(err.error)
          });
        }
      });
    },
  }
}
</script>

<style>
</style>
